<template>
    <div>
        <van-nav-bar title="登录" left-arrow @click-left="onClickLeft" />
        <div class="logo">
            <img src="../../../static/img/logo.png" />
        </div>
        <!-- 登录表单 -->
        <van-cell-group class="loginInput">
            <!-- 用户名 -->
            <van-field 
                class="username"
                v-model='username'
                left-icon="user-o"
                placeholder="用户名"
            />
            <!-- 密码 -->
            <van-field 
                class="password"
                v-model="password"
                type="password"
                placeholder="密码"
                left-icon="closed-eye"
            />
        </van-cell-group>
        <router-link to="/home">
            <van-button type="danger" class="loginBtn" @click="loginHandler">登录</van-button>
        </router-link>
        
        <van-button type="danger" class="registerBtn" to="/register">注册</van-button>
    </div>
</template>
<script>
export default {
    name : "login",
    data() {
        return {
            username:"",
            password:"",
        };
    },
    methods:{
        onClickLeft(){
            this.$router.push({ path: 'home' })
        },
        loginHandler(){
            localStorage.setItem('user',{name:this.name,password:this.password});
            this.$toast("登录成功!");
            this.$router.push({ path: 'home' })
        }
    }
};
</script>
<style scoped  lang="">
.van-nav-bar{
    background-color:#ff6341;
}
.van-nav-bar .van-icon {
    color:white;
}
.van-nav-bar__title {
    color: white;
}
.logo {
    text-align: center;
    margin: 90px auto 60px;
}
.logo img {
    width: 30%;
}
/* 清除vant表单的默认样式 */
[class*=van-hairline]::after{
    border:0;
}
.loginInput{
    border:0px;
    width:5.866667rem;
    margin:0 2rem 1.2rem 2.133333rem;
}
.username,.password{
    border:0;
    margin-bottom:.266667rem;
    border-bottom: .053333rem solid #f9f9fa;
}
/* 清除vant表单的默认样式 */
.van-cell:not(:last-child)::after {
    border-bottom: 0;
}
.loginBtn,.registerBtn{
    display:block;
    width:7.333333rem;
    border-radius:.266667rem;
    color:white;
    height:1.066667rem;
    margin: auto;
    background-color:#ff6341;
    margin-bottom:.746667rem;
    box-shadow: 0 0.075rem 0.075rem rgba(0, 0, 0, 0.3);
}
</style>